<template>
  <div>
    <div class="flex justify-between items-center pr-4 py-2 bg-white">
      <LayoutBreadcrumb class="grow" />
      <span>
        <a-input v-model:value="keyword" style="width: 220px" placeholder="请输入项目名称" />
        <a-button type="primary">查询</a-button>
      </span>
    </div>
    <div class="p-2">
      <a-row :gutter="8" style="overflow: hidden">
        <a-col class="bg-white" :span="4">
          <ul class="border border-b-0">
            <li class="text-sm text-gray-400 p-2 border-b">请选择项目</li>
            <li
              @click="onClickProject(item)"
              :class="activeProject.id === item.id ? 'bg-yellow-500 text-white' : ''"
              class="p-4 hover:bg-yellow-500 hover:text-white cursor-pointer border-b-1"
              v-for="item in projects"
              :key="item.id"
              >{{ item.name }}</li
            >
          </ul>
        </a-col>
        <a-col :span="20">
          <a-tabs v-model:activeKey="activeHubId" type="card" class="bg-white" @change="onClickHub">
            <a-tab-pane v-for="item in hubs" :key="item.id" :tab="item.name"> </a-tab-pane>
          </a-tabs>
          <this-table
            :project="activeProject.name"
            :hub="activeHubName"
            :rows="sensors"
            @on-setup="onSet"
            @on-edit="onEdit"
          />
        </a-col>
      </a-row>
    </div>

    <batch-modal ref="batchM" @saved="getSensorsByHub" />
    <single-modal ref="singleM" @finished="getSensorsByHub" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { LayoutBreadcrumb } from '../../../layouts/default/header/components';
import thisTable from './table.vue';
import batchModal from './batch/modal.vue';
import singleModal from './single/modal.vue';
import { defHttp } from '/@/utils/http/axios';

export default defineComponent({
  components: { LayoutBreadcrumb, thisTable, batchModal, singleModal },
  setup() {
    const radioStyle = reactive({
      display: 'flex',
      height: '50px',
      lineHeight: '50px',
    });
    const keyword = ref('');
    const activeProject = ref({ id: null, name: '' });
    const activeHubId = ref(null);
    const activeHubName = ref('');
    const batchM = ref();
    const singleM = ref();

    const projects = ref([]);
    const hubs = ref([]);
    const sensors = ref([]);

    function getProjects() {
      defHttp
        .get({
          url: '/project/search',
          params: { pageIndex: 1, pageSize: 999 },
        })
        .then((res) => {
          projects.value = res.data.pageList;
        });
    }

    getProjects();

    function onClickProject(item) {
      activeProject.value = item;
      hubs.value = [];
      getHubs(item.id);
    }

    function getHubs(project_id) {
      defHttp
        .get({ url: '/gather-device/get-by-project-id', params: { projectId: project_id } })
        .then((res) => {
          hubs.value = res.data;
          sensors.value = [];
        });
    }

    function onClickHub(event) {
      let hub = hubs.value.find((item) => item.id === event);
      activeHubName.value = hub.name;
      getSensorsByHub(hub.id);
    }

    function getSensorsByHub(hid) {
      defHttp
        .get({
          url: '/Sensor/get-by-gather-device-id',
          params: { gatherDeviceId: hid },
        })
        .then((res) => {
          sensors.value = res.data;
        });
    }

    function onSet(rows) {
      batchM.value.open(rows);
    }
    function onEdit(row) {
      singleM.value.open(row);
    }

    return {
      radioStyle,
      keyword,
      activeHubId,
      activeHubName,
      activeProject,
      onClickProject,
      onSet,
      onEdit,
      batchM,
      singleM,
      projects,
      hubs,
      sensors,
      onClickHub,
      getSensorsByHub,
    };
  },
});
</script>
